<!-- 部门管理 -->
<template>
<div class="depart-wp">
  <el-row :gutter="10">
    <el-col :span="12">
      <div class="com-main">
        <div class="com-hd-box">
          <el-button size="small" type="primary" @click="addChildDepart(currentDepart)">添加子部门</el-button>
          <el-button size="small" type="primary" @click="$refs.departInfo.open()">添加一级部门</el-button>
          <el-button size="small" icon="el-icon-upload2" type="primary">导入</el-button>
          <el-button size="small" icon="el-icon-download" type="primary">导出</el-button>
          <el-button size="small" @click="deleteBatchDepart()">批量删除</el-button>
        </div>

        <div class="com-check-box">
          <span class="text">当前选择：</span>
          <template v-if="currentDepart">
            <span class="text com-mr20">{{currentDepart[defaultProps.label]}}</span>
            <el-link class="btn" type="primary" :underline="false" @click="currentDepart = null">取消选择</el-link>
          </template>
        </div>

        <div class="search-box">
          <input v-model="filterText" type="text" placeholder="请输入部门名称" @keyup.enter="filterDepartByText()"/>
          <i class="el-icon-search" @click="filterDepartByText()"></i>
        </div>

        <div class="tree-box">
          <div class="tree-list">
            <el-tree ref="tree"
              :data="tree"
              show-checkbox
              default-expand-all
              :expand-on-click-node="false"
              :node-key="defaultProps.key"
              :check-strictly="isNoRelation"
              :default-expanded-keys="expandedKeys"
              :default-checked-keys="checkedKeys"
              :props="defaultProps"
              :filter-node-method="filterNode">
              <div class="depart-tree-node" slot-scope="{ node, data }"
                :class="{active: data == currentDepart}"
                @click="setCurrentDepart(data)"
                @contextmenu.prevent="$refs.contextMenu.open($event, data)">
                {{ node.label }}
              </div>
            </el-tree>
          </div>
          <div class="footer">
            <el-dropdown placement="top" size="medium">
              <el-button size="small">
                树操作<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item><div class="drop-tree-item" @click="toggleRelation(true)">父子关联</div></el-dropdown-item>
                <el-dropdown-item><div class="drop-tree-item" @click="toggleRelation(false)">取消关联</div></el-dropdown-item>
                <el-dropdown-item><div class="drop-tree-item" @click="setCheckedMenu(true)">全部勾选</div></el-dropdown-item>
                <el-dropdown-item><div class="drop-tree-item" @click="setCheckedMenu(false)">取消全选</div></el-dropdown-item>
                <el-dropdown-item><div class="drop-tree-item" @click="toggleExpandedAll(true)">展开所有</div></el-dropdown-item>
                <el-dropdown-item><div class="drop-tree-item" @click="toggleExpandedAll(false)">合并所有</div></el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </div>
    </el-col>
    <el-col :span="12">
      <el-tabs v-model="tabActive">
        <el-tab-pane v-for="(item, index) in tabList" :key="index"
          :label="item.label" :name="item.value">
          <component :is="item.component" 
            :current-depart="currentDepart"
            @reload="getData"></component>
        </el-tab-pane>
      </el-tabs>
    </el-col>
  </el-row>

  <!-- 右键操作弹窗 -->
  <context-menu ref="contextMenu" :list="treeHandle"></context-menu>
  <!-- 部门弹窗 -->
  <depart-info ref="departInfo" @reload="getData"></depart-info>

</div>
</template>
<script>

import departDetail from "./modules/depart-detail.vue";
import departRoot from "./modules/depart-root.vue";
import contextMenu from "@/dialogs/context-menu.vue";
import departInfo from "@/dialogs/system/depart/depart-info.vue";


import {depart} from "@/config/api.js";

export default {
  name: 'depart',
  components: {
    departDetail,
    departRoot,
    contextMenu,
    departInfo,
  },
  data () {
    return {

      filterText: '', // 搜索数据

      // 配置项
      defaultProps: {
        children: 'children',
        label: 'title',
        key: 'value'
      },
      // 是否严格的遵循父子不互相关联的做法
      isNoRelation: true,
      // 当前展开
      expandedKeys: [],
      // 当前选中
      checkedKeys: [],
      // 本来选中
      checkedOrigin: [],
      // 所有的idkey
      allKeys: [],
      // 树数据
      tree: [],
      // 当前选中的结点
      currentDepart: null,

      // 部门右键菜单操作列表
      treeHandle: [
        {name: '添加', fn: this.addChildDepart},
        {name: '删除', fn: this.deleteDepart},
        {name: '取消'}
      ],

      tabActive: '1',
      tabList: [
        {label: '基本信息', value: '1', component: departDetail},
        {label: '部门权限', value: '2', component: departRoot}
      ],
    }
  },
  mounted () {
    this.getData(); // 获取所有部门树
  },
  methods: {
    // 获取所有部门树
    getData () {
      this.$get(depart.queryTreeList).then(res => {
        if (res.success) {
          this.tree = res.result;
        }
      })
    },

    // 根据输入框搜索部门
    filterDepartByText () {
      this.$refs.tree.filter(this.filterText);
    },

    // 树结点过滤规则
    filterNode(value, data) {
      if (!value) return true;
      return data[this.defaultProps.label].indexOf(value) !== -1;
    },

    // 切换关联关系
    toggleRelation (data) {
      this.isNoRelation = !data;
    },

    // 设置选中菜单
    setCheckedMenu (data) {
      var arr = data;
      if (typeof data == 'boolean') {
        arr = data ? this.$g.copy(this.allKeys) : []
      }
      this.$refs.tree.setCheckedKeys(arr);
    },

    // 展开合并
    toggleExpandedAll (isExpand) {
      var _this = this, key = this.defaultProps.key, children = this.defaultProps.children;
      // 遍历树
      ergodic(this.tree);
      // 遍历
      function ergodic (arr) {
        arr.forEach(item => {
          _this.$refs.tree.store.nodesMap[item[key]].expanded = isExpand;
          if (item[children] && item[children].length) {
            ergodic(item[children]);
          }
        })
      }
    },

    // 设置当前选中的结点
    setCurrentDepart (data) {
      this.currentDepart = data;
    },

    // 添加部门
    addChildDepart (data) {
      if (!data) {
        this.$message.warning('请先选中一条记录!');
        return;
      }
      this.$refs.departInfo.open(data);
    },

    // 删除部门
    deleteDepart (data) {
      var param = {
        id: data.id
      }
      this.$postDelete(depart.delete, param).then(res => {
        if (res.success) {
          this.$message.success(res.message);
          this.getData();
        }
      })
    },

    // 批量删除
    deleteBatchDepart () {
      var aId = this.$refs.tree.getCheckedKeys();
      if (!aId.length) {
        this.$message.warning('请先选中一条记录！');
        return;
      }
      var param = {
        ids: aId.join(',')
      }
      this.$g.confirm('此操作将删除选中部门, 是否继续?').then(() => {
        this.$postDelete(depart.deleteBatch, param).then(res => {
          if (res.success) {
            this.$message.success(res.message);
            this.getData();
          }
        })
      })
    }

  }
}
</script>
<style lang="scss" scoped>
.depart-wp {
  .search-box {
    position: relative;
    input {
      padding: 0 40px 0 20px;
      width: 100%;
      height: 32px;
      border: none;
      border-bottom: 1px solid #B5E3FF;
      box-sizing: border-box;
      outline: medium;
      &:focus {
        box-shadow: 0 1px 2px #B5E3FF;
      }
    }
    i {
      position: absolute;
      top: 0;
      right: 0;
      z-index: 2;
      width: 32px;
      height: 32px;
      text-align: center;
      line-height: 31px;
      cursor: pointer;
    }
  }

  .tree-box {
    .tree-list {
      margin: 5px 0;
      min-height: 200px;
      .depart-tree-node {
        margin-left: -3px;
        padding: 0 3px;
        &.active {
          background: #bae7ff;
        }
      }
    }
    .footer {
      margin: 0 -20px -20px;
      padding: 10px 20px;
      border-top: 1px solid #E8E8E8;
    }
  }
}

</style>